/**
* @description: 搜索页
* @author: liang
**/
<template>
  <div class="search-main">
    <nav-bar class="header" back @goBack="onCancel">
      <van-search
          slot="search"
          v-model="value"
          placeholder="请输入项目名称"
          left-icon=""
          right-icon="../../../static/controlImg/search.png"
          @search="onSearch"
      >
      </van-search>
    </nav-bar>
    <view class="main-container">
      <view class="plant">
        <text>搜索历史</text>
        <img src="../../../static/controlImg/del.png" alt="">
      </view>
      <ul class="search-menu">
        <li v-for="(item,index) in historyList" :key="index">{{item.title}}</li>
      </ul>
      <view class="plant">
        <text>搜索发现</text>
      </view>
      <ul class="search-menu">
        <li v-for="(item,index) in findList" :key="index">{{item.title}}</li>
      </ul>
    </view>
  </div>
</template>

<script>

import navBar from "./nav-bar";

export default {
  name: "search",
  components: {navBar},
  props: {
    // 每次显示此页时清空搜索框
    empty: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    empty: {
      immediate: true,
      handler: function (newVal) {
        if(newVal) {
          this.value = "";
        }
      }
    }
  },
  data() {
    return {
      value: "",
      historyList:[

      ],
      findList:[]
    }
  },
  methods: {
    onSearch() {
      this.$emit("search", this.value);
      this.value = "";
    },
    onCancel() {
      this.$emit("cancel");
      this.value = "";
    },
  }
};
</script>

<style scoped lang="scss">
.search-main {
  height: 100vh;
  width: 100vw;
  background: #F2F6FA;
  .van-search {
    vertical-align: middle;
    width: calc(100% - #{px2vw(50)});
    display: inline-block;
    background: none;
    padding: 0;
  }
  .van-search__content {
    border-radius: px2vh(20) px2vw(20);
  }
  .main-container {
    width: calc(100vw - #{px2vw(60)});
    height: calc(100vh - #{px2vh(220)});
    margin: px2vh(30) px2vw(30);
    .plant {
      width: 100%;
      height: px2vh(50);
      font-size: px2vw(40);
      color: #666;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: px2vh(30);
      text {
        flex: 1;
      }
      img {
        width: px2vw(37);
      }
    }
    .search-menu {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      li {
        height: px2vh(120);
        line-height: px2vh(120);
        color: #333;
        background: #fff;
        text-align: center;
        border-radius: px2vw(20);
        margin-right: px2vw(30);
        margin-bottom: px2vh(30);
        padding: 0 px2vw(50);
        font-size: px2vw(40);
        white-space: nowrap;
      }
    }
  }
}
/deep/.van-icon__image {
  margin-right:px2vw(49);
}
</style>
